<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <div class="box">
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple">订单编号：<span>{{ list.id }}</span></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">运单编号：<span>{{ list.transportOrder.id }}</span></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">下单时间：<span>{{ list.createTime }}</span></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">订单状态：
          <span>{{ list.status===23000?"待取件": '已取件' }}</span>
        </div></el-col>
      </el-row>
      <el-row style="margin-top: 15px;">
        <el-col :span="24"><div class="grid-content bg-purple-dark">预计到达日期：<span>{{ list.estimatedArrivalTime }}</span></div></el-col>
      </el-row>
    </div>
    <el-collapse
      v-model="activeNames"
      @change="handleChange"
    >
      <!-- 基本信息 -->
      <el-collapse-item
        title="基本信息"
      >
        <div class="box1">
          <div>
            <i class="el-icon-location-information"></i>
            <span>发货方</span>
            <el-row>
              <el-col :span="6"><div class="grid-content bg-purple">发货人姓名：<span>{{ list.senderName }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light">发货方电话：<span>{{ list.senderPhone }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><div class="grid-content bg-purple">发货方地址：<span>{{ list.senderProvince.name }}{{ list.senderCity.name }}{{ list.senderCounty.name }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light">详细地址：<span>{{ list.senderAddress }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px;">
            <i class="el-icon-aim"></i>
            <span>收货方</span>
            <el-row>
              <el-col :span="6"><div class="grid-content bg-purple">收货方姓名：<span>{{ list.receiverName }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light">收货方电话：<span>{{ list.receiverPhone }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><div class="grid-content bg-purple">发货方地址：<span>{{ list.receiverProvince.name }}{{ list.receiverCity.name }}{{ list.receiverCounty.name }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light">详细地址：<span>{{ list.receiverAddress }}</span></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
          </div>

          <div style="margin-top: 20px;">
            <i class="el-icon-s-flag"></i>
            <span>距离：{{ list.distance }}km</span>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple">备注：<span>暂无</span></div></el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
      <!-- 订单跟踪 -->
      <el-collapse-item
        title="订单跟踪"
      >

      </el-collapse-item>
      <!-- 订单轨迹 -->
      <el-collapse-item
        title="订单轨迹"
      >

      </el-collapse-item>
      <!-- 取件信息 -->
      <el-collapse-item
        title="取件信息"
      >
        <div style="padding: 50px;">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">所在网点：<span>{{ list.taskPickup.agency.name }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">取件类型：
              {{ list.pickupType===1?"网点自寄":"上门取件" }}
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">作业状态：
              {{ list.taskPickup.assignedStatus===2?"已完成":"未完成" }}
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">取件快递员：<span>{{ list.taskPickup.courier.name }}</span></div></el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col :span="6"><div class="grid-content bg-purple">快递员电话：<span>{{ list.taskPickup.courier.mobile }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">预计取件时间：<span>{{ list.createTime }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">取件完成时间：<span>{{ list.taskPickup.actualEndTime }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <!-- 派送信息 -->
      <el-collapse-item
        title="派送信息"
      >
        <div style="padding: 50px;">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">所在网点：<span>{{ list.taskDispatch.courier.agency.name }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">作业状态：
              {{ list.taskDispatch.courier.status===1?"已完成":"未完成" }}
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">派送快递员：<span>{{ list.taskDispatch.courier.name }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">快递员电话：<span>{{ list.taskDispatch.courier.mobile }}</span></div></el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col :span="6"><div class="grid-content bg-purple">预计派送时间：<span>{{ list.taskDispatch.estimatedStartTime }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">派件完成时间：<span>{{ list.updated }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <!-- 费用信息 -->
      <el-collapse-item
        title="费用信息"
      >
        <div style="padding: 50px;">
          <el-row>
            <el-col :span="8"><div class="grid-content bg-purple">运费：<span>{{ list.amount }}</span>元</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">支付方式：
              {{ list.paymentMethod===1?"预结":"到付" }}
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">付费状态：{{ list.paymentStatus===1?"已付":"未付" }}</div></el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <!-- 货品信息 -->
      <el-collapse-item
        title="货品信息"
      >
        <div style="padding: 50px;">
          <template>
            <el-table
              :data="tableData"
              style="width: 100%"
            >
              <el-table-column
                prop=""
                label="序号"
                width="60"
              >
              </el-table-column>

              <el-table-column
                prop=""
                label="货品名称"
                width="340"
              >
              </el-table-column>

              <el-table-column
                prop=""
                label="货品类型"
                width="340"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="重量（千克）"
                width="343"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="体积立方"
                width="345"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="操作"
                width="150"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>
<script>
import { orderDetail } from '@/api/order'
export default {
  data() {
    return {
      list: [],
      activeNames: ['1']
    }
  },
  created() {
    this.orderDetail()
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    //   Detail() {
    //     console.log(this.$route.query.id)
    //     this.O = this.$route.query.id
    //   },
    async orderDetail() {
      console.log(this.$route.query.id)
      const res = await orderDetail(this.$route.query.id)
      console.log(res.data)
      this.list = res.data
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
.dashboard-container{
  margin-top: 15px;
  padding: 15px;
}.box{
  padding: 20px;
  background-color: #fff;
  margin-bottom: 15px;
}.box1{
  padding: 50px;
}
</style>

